<!DOCTYPE html>

<html>
    <head>
        <title>利用边框绘制几何图形</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .common{width:0;height: 0;display: inline-block;margin:50px; border-style: solid;}
            .b_three1{border-width: 0 50px 100px 50px;border-color: transparent transparent red transparent;}
            .b_three2{border-width: 100px 50px 0 50px;border-color:  red transparent transparent transparent;}
            .b_three3{border-width: 100px 0 0 100px;border-color: transparent transparent transparent red;}
            .b_three4{border-width: 100px 0 0 100px;border-color: red transparent transparent transparent;}
            .b_three5{width:100px;height:50px;background: red;border-radius: 50%;border:none;}
            .b_three6{width:50px;height:100px;background: red;border-radius: 50%;border:none;}
            .b_five1{border-width: 50px 18px 0 18px;border-color:red transparent transparent transparent;position: relative;width:54px;}
            .b_five1:before{border-style: solid;content: "";position: absolute;border-width: 0 45px 35px;border-color: transparent transparent red transparent;border-style: solid;top: -85px;left: -18px;}
            .b_six1{border-width:46.8px 27px 0;border-color: red transparent transparent transparent;position: relative;width:54px;}
            .b_six1:after{border-style: solid;content: "";position: absolute;border-width:0 27px 46.8px;border-color: transparent transparent red transparent;width:54px;top: -93.6px;left: -27px;}
            .b_five_star{border-width: 0 61.8px 190px;border-color:transparent transparent red transparent;position: relative;}
            .b_five_star:before{border-style: solid;content: "";position: absolute;border-width:70px 100px 0;border-color:red transparent transparent transparent;top: 76.74px;left: -100px;}
            .b_five_star:after{border-style: solid;content: "";position: absolute;border-width:0 61.8px 43.26px;border-color:transparent transparent #fff transparent;top: 146.74px;left: -61.8px;}
            #star-five{width: 0;height: 0;color: red;margin: 50px 0;position: relative;display:inline-block;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;-moz-transfrom:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);}
            #star-five:before{width: 0;height: 0;border-left: 30px solid transparent;border-right: 30px solid transparent;border-bottom: 80px solid red;position: absolute;top: -45px;left: -65px;color: white;display: block;content: ""; -moz-transform:rotate(-35deg);-webkit-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
            #star-five:after{width: 0;height: 0;display: block;position: absolute;color: red;top: 3px;left: -105px;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 70px solid red;content: "";-moz-transform:rotate(-70deg);-webkit-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);}
            .b_six_star{border-width: 0 100px 173px;border-color:transparent transparent red transparent;position: relative;}
            .b_six_star:before{border-style: solid;content: "";position: absolute;border-width:173px 100px 0;border-color:red transparent transparent transparent;top: 57px;left: -100px;}
            .b_eight{border-width: 0 0 120.7px 0;border-color:transparent transparent red transparent;position: relative;width:50px;}
            .b_eight:before{border-style: solid;content: "";position: absolute;border-width:35.35px 35.35px 35.35px 0;border-color:transparent red transparent transparent;top: 0;left: -35.35px;height:50px;}
            .b_eight:after{border-style: solid;content: "";position: absolute;border-width:35.35px 0 35.35px 35.35px;border-color:transparent transparent transparent red;top: 0;right: -35.35px;height:50px;}
            .b_eight_star{border-width: 0 0 100px 0;border-color:transparent transparent red transparent;position: relative;width:100px;}
             .b_eight_star:before{border-style: solid;content: "";position: absolute;border-width:70.7px 70.7px 70.7px 0;border-color:transparent red transparent transparent;top: 0;left: -20.7px;top:-20.7px;}
              .b_eight_star:after{border-style: solid;content: "";position: absolute;border-width:70.7px 0 70.7px 70.7px;border-color:transparent transparent transparent red ;top: 0;right: -20.7px;top:-20.7px;}
              .test{width: 300px;height:100px;border:1px solid #666666;background: #cccccc;margin:10px auto;position: relative;}
              .test:before{border-style: solid;content: "";position: absolute;border-width: 12px 0 0 12px;border-color: #666666 transparent transparent transparent;top:5px;left:-13px;}
              .test:after{border-style: solid;content: "";position: absolute;border-width: 10px 0 0 10px;border-color: #cccccc transparent transparent transparent;top:6px;left:-10px;}
        </style>
    </head>
    <body>
        <!--|三角形|-->
        <div class="common b_three1"></div>
        <div class="common b_three2"></div>
        <div class="common b_three3"></div>
        <div class="common b_three4"></div>
        <!--|椭圆|-->
        <div class="common b_three5"></div>
        <div class="common b_three6"></div>
        <!--|五边形|-->
        <div class="common b_five1"></div>
        <!--|六边形|-->
        <div class="common b_six1"></div>
        <!--|五角星|-->
        <div class="common b_five_star"></div>
        <div id="star-five"></div>
        <!--|六角星|-->
        <div class="common b_six_star"></div>
        <!--|八边形|-->
        <div class="common b_eight"></div>
        <!--|八角形|-->
        <div class="common b_eight_star"></div>
        <!--|小应用|-->
        <div class="test"></div>
    </body>
</html>
